{block name=head}
<style type="text/css">

</style>
{/block}

{block name=body}
<div id="main">
    <div class="container">
        <div class="row hidden-xs">
            <div class="col-sm-12">
                {include file='breadcrumbs.tpl'}
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                {if $listing_content3}
                    {if $listing_content5}
                        <a target="_blank" href="{$listing_content5}"><img src="{$listing_content3}" class="img-responsive ad-banner" alt="{$listing_title} ad-banner" /></a>
                    {else}
                        <img src="{$listing_content3}" class="img-responsive ad-banner" alt="{$listing_title} ad-banner" />
                    {/if}
                {/if}
            </div>
        </div>
        
        <div class="row">
            <div id="maintext" class="col-sm-12">
                <h1 class="title">{$listing_name}</h1>
                {$listing_content1}
            </div>
        </div>
    </div>
</div>

<div id="enroltrialhead">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <span class="bold">{$lang.home.enrol}</span>{$lang.home.enrol_more}
            </div>
        </div>
    </div>
</div>

<div id="enroltrialmain">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        
            <div class="row">
                <!-- <div id="floatingCirclesG">
                    <div class="f_circleG" id="frotateG_01">
                    </div>
                    <div class="f_circleG" id="frotateG_02">
                    </div>
                    <div class="f_circleG" id="frotateG_03">
                    </div>
                    <div class="f_circleG" id="frotateG_04">
                    </div>
                    <div class="f_circleG" id="frotateG_05">
                    </div>
                    <div class="f_circleG" id="frotateG_06">
                    </div>
                    <div class="f_circleG" id="frotateG_07">
                    </div>
                    <div class="f_circleG" id="frotateG_08">
                    </div>
                </div> -->
                <form id="search-classes-form" method="get" action="/enrol/search">
                        <!-- <div class="col-sm-6">
                        <label>Child's D.O.B.:</label>
                        <div>
                        <span class="form-group ts">
                            <select id="dobday" name="day" class="form-control">
                                <option value="">Day</option>
                                {for $day=1 to 31}
                                    <option value="{$day}" {if $search.day eq $day}selected="selected"{/if}>{$day}</option>
                                {/for}
                            </select>
                        </span>
                        <span class="form-group to" id="monthout">
                            <select id="dobmonth" name="month" class="form-control">
                                    <option value="">Month</option>
                                    <option value="1" {if $search.month eq 1}selected="selected"{/if}>January</option>
                                    <option value="2" {if $search.month eq 2}selected="selected"{/if}>February</option>
                                    <option value="3" {if $search.month eq 3}selected="selected"{/if}>March</option>
                                    <option value="4" {if $search.month eq 4}selected="selected"{/if}>April</option>
                                    <option value="5" {if $search.month eq 5}selected="selected"{/if}>May</option>
                                    <option value="6" {if $search.month eq 6}selected="selected"{/if}>June</option>
                                    <option value="7" {if $search.month eq 7}selected="selected"{/if}>July</option>
                                    <option value="8" {if $search.month eq 8}selected="selected"{/if}>August</option>
                                    <option value="9" {if $search.month eq 9}selected="selected"{/if}>September</option>
                                    <option value="10" {if $search.month eq 10}selected="selected"{/if}>October</option>
                                    <option value="11" {if $search.month eq 11}selected="selected"{/if}>November</option>
                                    <option value="12" {if $search.month eq 12}selected="selected"{/if}>December</option>
                            </select>
                        </span>
                        <span class="form-group ts">
                            <select id="dobyear" name="year" class="form-control">
                                <option value="">Year</option>
                                {assign var=initYear value='Y'|date}
                                {for $year=$initYear-7 to $initYear-2}
                                    <option value="{$year}" {if $search.year eq $year}selected="selected"{/if}>{$year}</option>
                                {/for}
                            </select>
                        </span>
                        </div>
                        </div> -->
                        
                        <div class="col-sm-12">
                            <label for="enrolsuburb">选择您所在的地区*:</label>
                            <div class="form-group nomargin" id="location">
<!--                                 <input type="text" class="form-control" id="enrolsuburb" name="location" value="{$search.location}" required/> -->
                                <span class="form-group ts">
                                    <select name="state" id="state" class="form-control">
                                    {foreach from=$states item=state}
                                    <option value="{$state.id}" {if $search.state eq $state.value}selected="selected"{/if}>{$state.value}</option>
                                    {/foreach}
                                    </select>
                                </span>
                                <span class="form-group ts">
                                    <select name="suburb" id="suburb" class="form-control">
                                    {foreach from=$suburbs item=suburb}
                                    <option value="{$suburb.id}" {if $search.suburb eq $suburb.value}selected="selected"{/if}>{$suburb.value}</option>
                                    {/foreach}
                                    </select>
                                </span>
                                <span class="form-group to">
                                    <select name="country" id="country" class="form-control">
                                    {foreach from=$countries item=country}
                                    <option value="{$country.id}" {if $search.country eq $country.value}selected="selected"{/if}>{$country.value}</option>
                                    {/foreach}
                                    </select>
                                </span>
                            </div>
                        </div>
                        
                        <div class="col-sm-12">
                            <button class="search" type="submit"><span>{$lang.home.search_btn}</span></button>
                            <div class="text-center">全国共有 {$cnt_locations} 家场馆，<a href="/our-program/locations">点击前往</a></div>
                        </div>
                    </form>
            </div>
            
            </div>
        </div>
    </div>
</div>

{include file='helpblock.tpl'}

{/block}

{block name=tail}
<script type="text/javascript">
jQuery(document).ready(function($){
    $('select').selectBoxIt();

    var oProvince = $("select#state");
    var oCity = $("select#suburb");
    var oCountry = $("select#country");

    var city = function(){
        var n = oProvince.get(0).selectedIndex;
        var id = oProvince.find("option:selected").val();
        $.ajax({
            url: "/process/regionsuburbs",
            dataType: "json",
            data: {
                query: id
            },
            success: function( data ) {
                console.log(data);
                oCity.data("selectBox-selectBoxIt").remove();
                oCity.data("selectBox-selectBoxIt").add(data);
                district();
            }
        });
    }

    var district = function(){
        var n = oCity.get(0).selectedIndex;
        var id = oCity.find("option:selected").val();
        $.ajax({
            url: "/process/regionsuburbs",
            dataType: "json",
            data: {
                query: id
            },
            success: function( data ) {
                console.log(data);
                oCountry.data("selectBox-selectBoxIt").remove();
                oCountry.data("selectBox-selectBoxIt").add(data);
            }
        });
    }

    city();
    
    oProvince.change(function(){
        city();
    });

    oCity.change(function(){
        district();
    });

    // $('#search-classes-form').validate();
 //    $( "#enrolsuburb" ).autocomplete({
    //     source: function( request, response ) {
    //       $.ajax({
    //         url: "/process/postcodesuburbs",
    //         dataType: "json",
    //         data: {
    //           query: request.term
    //         },
    //         success: function( data ) {
    //           response( data.values );
    //         }
    //       });
    //     },
    //     messages: {
    //         noResults: '',
    //         results: function() {}
    //     },
    //     minLength: 3
    //   });
});
/* $(window).load(function() {
      $('#floatingCirclesG').hide();
      $('#search-classes-form').show();
    }); */
</script>
{/block}
